<!--回收站管理页面-->
<style lang="less">
.river {
  margin: 15px;
  .icon-btn {
    font-size: 20px;
    color: #555555;
  }
  .smallForm {
    margin-right: 20px;
    display: inline-block;
  }
}
</style>

<template>
  <div class="river">
    <Card :bordered="false">
      <p slot="title"
         class="white">更多功能 > <span class="select-font">回收站</span></p>
      <div>
        <Button type="error"
                @click.native="del1"
                style="margin-right: 30px">从回收站删除</Button>
        <Form :model="formItem"
              class="smallForm">
          <Input v-model="formItem.name"
                 :maxlength="50"
                 style="width:200px;"
                 placeholder="请输入治水动态标题"></Input>
        </Form>
        <Button type="info"
                @click="getData()">搜索</Button>
      </div>
    </Card>
    <div class="">
      <Table @on-selection-change="showSelect"
             :data="outfallData"
             :columns="outfallColumns"
             stripe></Table>
      <Page class="pull-right"
            :total="Page.total"
            :current="Page.current"
            :page-size="Page.pageSize"
            size="small"
            show-total
            @on-change="changePage"></Page>
    </div>
    <pictures ref="pictures"></pictures>
    <del-modal ref="delModal"
               title='文案'
               @del="del"
               :delArr="selectData"
               :url="floodUrldel"></del-modal>
  </div>
</template>

<script>
import { ajaxPost } from 'global/axios';
import { domain2 } from 'global/setting';
import storage from 'good-storage';
import picture from 'public/picture';
import tableDropdown from 'public/tableHeaderDropdown';
import delModal from 'components/public/delModal';
export default {
  components: {
    pictures: picture,
    'del-modal': delModal,
  },
  data() {
    return {
      urlOutFallList: '/waterlaw/dynamic/list',
      outfallData: [],
      outfallColumns: [
        {
          type: 'selection',
          width: 60,
          align: 'center',
          fixed: 'left',
        },
        {
          title: '标题',
          key: 'title',
          width: 300,
          align: 'center',
        },
        {
          title: '图片',
          key: 'photo',
          align: 'center',
          render: (h, param) => {
            if (param.row.photos) {
              let html = [];
              html.push(
                h('img', {
                  attrs: {
                    src: domain2 + param.row.photos,
                  },
                  style: {
                    width: '80px',
                    height: '50px',
                  },
                })
              );
              return h('div', html);
            } else {
              return '暂无图片';
            }
          },
        },
        {
          title: '原文地址',
          key: 'article_url',
        },
        {
          title: '操作',
          render: (h, params) => {
            return h(
              'Button',
              {
                props: {
                  type: 'primary',
                  size: 'small',
                },
                style: {
                  marginRight: '5px',
                },
                on: {
                  click: () => {
                    this.$Message.warning('暂未开放');
                  },
                },
              },
              '恢复'
            );
          },
        },
      ],
      formItem: {
        title: '',
      },
      Page: {
        current: 1,
        pageSize: 11,
        total: 0,
        page: 1,
      },
      selectData: [],
    };
  },
  methods: {
    getData() {
      let params = {
        data: {
          searchValue: {
            flag: 1,
          },
          page: this.Page.page,
          pageSize: this.Page.pageSize,
        },
        url: this.urlOutFallList,
        token: storage.session.get('token'),
        success: res => {
          this.$Loading.finish();
          this.outfallData = res.data.result.result;
          this.Page.total = res.data.result.totalSize;
        },
      };
      if (this.formItem.title !== '') {
        params.data.searchValue.title = `${this.formItem.title}|#|like`;
      }
      ajaxPost(params);
    },
    changePage(page) {
      this.Page.page = page;
      this.getData();
    },
    showSelect(data) {
      this.selectData = data; // 把勾选的数组存起来
    },
    del1() {
      if (this.selectData.length > 0) {
        this.$refs.delModal.showModal();
      } else {
        this.$Message.warning('请选择治水动态');
      }
    },
  },
  mounted() {
    this.getData();
  },
};
</script>
